<template>
    <div id="head">
        <div class="content">
            <span>toToList</span>
            <input type="text" placeholder="添加todolist" v-model="content" @keyup.enter="addTask">
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            content: ''
        }
    },

    methods: {
        addTask() {
            // 将天加的任务传递给内容组件
            if(this.content) {
                var task = {
                    content: this.content,
                    isFinish: false // isFinish 标记任务是否完成
                }
                this.bus.$emit('addtask', task)
            } else {
                alert("请添加任务")
            }
            
        }
    }
}
</script>
<style lang="scss" scoped>
    #head{
        width: 100%;
        height: 70px;
        background-color: #555;
        color: #fff;
        div{
            width: 800px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 0 auto;
            height: 100%;
            span{
                font-size: 30px;
                font-weight: bold;
            }
            input{
                width: 400px;
                height: 40px;
                line-height: 40px;
                border: none;
                border-radius: 5px;
                padding-left: 15px;
            }
        }
    }
</style>